<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: libowu
  Date: 18-10-20
  Time: 下午8:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/sysCss/userDetail.css">

</head>
<body>

<div class="fu-parent">
    <div class="fu-box fu-detail">
        <div class="fu-detailHead" style="display: none;">
            <img src="/img/appLogo/ysn.jpeg"/>
        </div>

        <div class="fu-content">
            <span class="info fu-name"><label>姓名：</label><span id="fu-name">${user.name}</span></span>
            <span class="info fu-type"><label>类型：</label><span id="fu-type">${user.type}</span></span>
            <span class="info fu-address"><label>地址：</label><span id="fu-address">${user.address}</span></span>
            <span class="info fu-sex"><label>性别：</label><span id="fu-sex">${user.sex}</span> </span>
            <span class="info fu-age"><label>年龄：</label><span id="age">${user.age}</span> </span>
            <span class="info fu-education"><label>学历：</label><span id="fu-education">${user.education}</span> </span>
            <span class="info fu-education"><label>邮件：</label><span id="fu-email">${user.email}</span> </span>
            <span class="info fu-createDate"><label>创建时间：</label><span id="fu-createDate"><f:formatDate value="${user.createdate}" type="both" dateStyle="long"/></span> </span>

            <div class=" fu-option " >
                <a href="/futer/userAdmin" class="btn btn-info">返回</a>
                <button type="button" class="btn btn-info" onclick="edit()">编辑</button>
            </div>
        </div>
    </div>


    <form method="post" name="form">
        <div class="fu-box fu-edit">
            <div class="fu-detailHead" style="display: none;">
                <img src="/img/appLogo/ysn.jpeg"/>
            </div>

            <div class="fu-content">
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1">姓名</span>
                    <input type="text" class="form-control" aria-describedby="basic-addon1" value="${user.name}" required="required" name="name">
                </div>

                <c:if test="${sessionScope.type=='admin'}">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon8">密码</span>
                        <input type="password" class="form-control" aria-describedby="basic-addon1" value="${user.password}" required="required" name="password">
                    </div>
                </c:if>


                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon9">年龄</span>
                    <input type="number" class="form-control"  aria-describedby="basic-addon1" value="${user.age}" min="0" max="200" name="age">
                </div>

                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon3">地址</span>
                    <input type="text" class="form-control"  aria-describedby="basic-addon1" value="${user.address}" name="address">
                </div>

                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon4">学历</span>
                    <input type="text" class="form-control" aria-describedby="basic-addon1" value="${user.education}" name="education">
                </div>

                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon5">邮件</span>
                    <input type="email" class="form-control" aria-describedby="basic-addon1" value="${user.email}" name="email">
                </div>


                <div class="fu-choose">

                    <div class="fu-chooseSe">
                        <c:if test="${user.sex=='男'}">
                            <span>性别：</span><label><input type="radio" name="sex" checked value="男"/>男</label>
                            <label><input type="radio" name="sex" value="女"/>女</label>
                        </c:if>

                        <c:if test="${user.sex=='女'}">
                            <span>性别：</span><label><input type="radio" name="sex" value="男"/>男</label>
                            <label><input type="radio" name="sex" checked value="女"/>女</label>
                        </c:if>
                    </div>


                    <c:if test="${sessionScope.user.type=='admin' && sessionScope.user.name!=user.name && sessionScope.user.id<user.id}">
                        <div class="fu-chooseTy">
                            <span>类型：</span><label><input type="radio" name="type" checked value="admin"/>admin</label>
                            <label style="margin-right: 20px"><input type="radio" name="type" checked value="user"/>user</label>
                        </div>
                    </c:if>

                </div>



                <div class=" fu-option " >
                    <a href="/futer/userAdmin" class="btn btn-info">返回</a>
                    <button type="button" class="btn btn-info" onclick="detail()">详情</button>
                    <button type="button" class="btn btn-info" onclick="save()" >保存</button>
                </div>
            </div>

        </div>
    </form>

    <div class="fu-al" id="al">
        保存成功
    </div>
</div>


<script type="text/javascript">
    (document.getElementById("al")).style.display='none';

    function edit(){
        var detail = document.querySelector(".fu-detail");
        var edit = document.querySelector(".fu-edit");
        detail.style.transform = "rotateY(180deg)";
        edit.style.transform = "rotateY(0deg)";
        edit.style.zIndex='999';
        detail.style.zIndex='-1';

    }

    function detail(){
        var edit = document.querySelector(".fu-edit");
        var detail = document.querySelector(".fu-detail");
        edit.style.transform = "rotateY(-180deg)";
        detail.style.transform = "rotateY(0deg)";
        edit.style.zIndex='-1';
        detail.style.zIndex='22';
    }

    function hide(){
        (document.getElementById("al")).style.display='none';
    }

    function save(){
        //setTimeout(hide,2000);
        if(form.name.value==' ' || form.name.value==''){
            (document.getElementById("al")).style.backgroundColor='red';
            (document.getElementById("al")).innerText='名字不允许为空值';
            (document.getElementById("al")).style.zIndex='999';
            (document.getElementById("al")).style.display='block';
            setTimeout(hide,2000);
            return;
        }
        if (form.password!=null){
            if(form.password.value==' ' || form.password.value==''){
                (document.getElementById("al")).style.backgroundColor='red';
                (document.getElementById("al")).innerText='密码不允许为空值';
                (document.getElementById("al")).style.zIndex='999';
                (document.getElementById("al")).style.display='block';
                setTimeout(hide,2000);
                return;
            }
            if (form.password.value.length<6){
                (document.getElementById("al")).style.backgroundColor='red';
                (document.getElementById("al")).innerText='密码长度必须为6位数以上';
                (document.getElementById("al")).style.zIndex='999';
                (document.getElementById("al")).style.display='block';
                setTimeout(hide,2000);
                return;
            }
        }

        var info='';

        if ('${sessionScope.user.type}'=='admin'){
            var type ;
            try{
                type = form.type.value;
            }catch (e) {
                type = "${user.type}";
            }
            info={
                "name":form.name.value,
                "education":form.education.value,
                "sex":form.sex.value,
                "type":type,
                "address":form.address.value,
                "password":form.password.value,
                "age":form.age.value,
                "id":${user.id},
                "email":form.email.value
            };
        }else{
            info={
                "name":form.name.value,
                "education":form.education.value,
                "sex":form.sex.value,
                "address":form.address.value,
                "age":form.age.value,
                "id":${user.id},
                "email":form.email.value
            }
        }
        console.log(info);


        $.ajax({
            type: "post",
            url: "/futer/editUser",
            data:JSON.stringify(info) ,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response, ifo) {

                if (response=='请求被拒绝，无权限访问'){
                    parent.sengToLogin();
                    return;
                }

                if (response==-30){
                    (document.getElementById("al")).style.backgroundColor='red';
                    (document.getElementById("al")).innerText='此用户名已存在，无法修改';
                    (document.getElementById("al")).style.zIndex='999';
                    (document.getElementById("al")).style.display='block';
                    setTimeout(hide,2000);
                }else if (response==-20) {
                    (document.getElementById("al")).style.backgroundColor='red';
                    (document.getElementById("al")).innerText='此邮箱已存在，无法修改';
                    (document.getElementById("al")).style.zIndex='999';
                    (document.getElementById("al")).style.display='block';

                }else {
                    (document.getElementById("al")).style.backgroundColor='green';
                    (document.getElementById("al")).innerText='修改成功';
                    (document.getElementById("al")).style.zIndex='999';
                    (document.getElementById("al")).style.display='block';
                    setTimeout(hide,2000);

                    (document.getElementById("fu-name")).innerText=response.name;
                    (document.getElementById("fu-sex")).innerText=response.sex;
                    (document.getElementById("fu-education")).innerText=response.education;
                    (document.getElementById("fu-address")).innerText=response.address;
                    (document.getElementById("fu-age")).innerText=response.age;
                    (document.getElementById("fu-type")).innerText=response.type;
                    (document.getElementById("fu-createDate")).innerText=response.createdate;
                }
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                (document.getElementById("al")).style.backgroundColor='red';
                (document.getElementById("al")).innerText="修改失败";
                (document.getElementById("al")).style.zIndex='999';
                (document.getElementById("al")).style.display='block';
                setTimeout(hide,2000);
            }
        })
    }
</script>
</body>
</html>
